<template>
  <div v-loading="loading" class="app-container">
    <div class="filter-container">
      <el-select
        v-model="activityYear"
        placeholder="请选择学年"
        clearable
        size="medium"
        style="width: 130px"
        class="filter-item"
        @change="getList"
      >
        <el-option
          v-for="item in config.activityYearOptions"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="activityTerm"
        placeholder="请选择学期"
        clearable
        size="medium"
        style="width: 130px"
        class="filter-item"
        @change="getList"
      >
        <el-option
          v-for="item in config.activityModuleOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="userScore"
        placeholder="请选择成绩"
        clearable
        size="medium"
        style="width: 130px"
        class="filter-item"
        @change="getList"
      >
        <el-option
          v-for="item in config.userScores"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <!--<el-select
        v-if="depaSelectEnabled"
        v-model="activityDepa"
        placeholder="请选择系部"
        clearable
        size="medium"
        style="width: 130px"
        class="filter-item"
        @change="getList">
        <el-option
          v-for="item in config.departmentOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>-->
      <el-input v-if="depaSelectEnabled" v-model="searchContext" placeholder="请根据条件输入内容" class="name-search" size="medium" @change="getList">
        <el-select slot="prepend" v-model="searchAction" placeholder="请选择条件" @change="getList">
          <el-option key="1" value="user_id" label="学号"/>
        </el-select>
      </el-input>
      <el-button
        v-if="$store.getters.menuList.jw_mark_calc"
        type="primary"
        class="filter-item"
        size="medium"
        icon="el-icon-printer"
        @click="startCalcScore">
        计算教务成绩
      </el-button>
      <el-button
        v-if="$store.getters.menuList.jw_mark_export"
        type="primary"
        class="filter-item"
        size="medium"
        icon="el-icon-download"
        @click="exportScoreExcel">
        导出教务成绩
      </el-button>
      <el-dropdown class="filter-item">
        <el-button size="medium" type="primary">
          更多菜单<i class="el-icon-arrow-down el-icon--right"/>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="$store.getters.menuList.jw_rebuild_import"><span @click="uploadChongxiuShow = true">导入教务成绩Excel</span></el-dropdown-item>
          <el-dropdown-item v-if="$store.getters.menuList.jw_rebuild_excel"><span @click="exportChongXiu">导出重修Excel模板</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-table :data="studentList" size="medium" border stripe highlight-current-row>
      <el-table-column prop="user_id" label="学号" align="center"/>
      <el-table-column prop="username" label="姓名" align="center"/>
      <el-table-column prop="year" label="学年" align="center"/>
      <el-table-column prop="term" label="学期" align="center"/>
      <!--<el-table-column label="系部" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.depa | formatDepa }}</span>
        </template>
      </el-table-column>-->
      <el-table-column prop="kcdm" label="课程代码" align="center"/>
      <el-table-column prop="kcmc" label="课程名称" align="center" width="180px"/>
      <el-table-column prop="stu_cj" label="成绩" align="center"/>
      <el-table-column prop="score" label="学分" align="center"/>
      <el-table-column v-if="$store.getters.menuList.jw_rebuild_import" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEditAction(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="pageTotal" :page.sync="page" :limit="10" layout="prev, pager, next, jumper" class="hidden-xs-only" @pagination="getList"/>
    <pagination :total="pageTotal" :page.sync="page" :limit="10" small layout="prev, pager, next" class="hidden-sm-and-up" @pagination="getList"/>
    <upload-chongxiu :visible="uploadChongxiuShow" @close="uploadChongxiuShow = false"/>
    <edit :visible="editShow" :user="currentEditUser" @close="editShow = false" @update="getList"/>
  </div>
</template>

<script>
import config from '@/utils/config.js'
import Pagination from '@/components/Pagination'
import { getScoreList, calcScore } from '@/api/education'
import { Loading } from 'element-ui'
import uploadChongxiu from './uploadChongxiu'
import edit from './edit'

export default {
  components: { Pagination, Loading, uploadChongxiu, edit },
  data() {
    return {
      loading: false,
      page: 1,
      userInfo: null,
      config,
      pageTotal: 0,
      calcYear: null,
      calcTerm: null,
      activityYear: null,
      activityTerm: null,
      activityDepa: null,
      userScore: null,
      searchAction: 'user_id',
      searchContext: null,
      uploadChongxiuShow: false,
      editShow: false,
      currentEditUser: {},

      props: {
        value: 'label',
        children: 'cities'
      },
      studentList: [],
      depaSelectEnabled: true
    }
  },
  created() {
    this.userInfo = this.$store.getters.userInfo
    this.getList()
  },
  methods: {
    getList(data) {
      this.loading = true
      getScoreList(this.formatData(data))
        .then(res => {
          this.studentList = res.data
          this.pageTotal = res.total
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },
    startCalcScore() {
      const loadingInstance = Loading.service({ fullscreen: true, text: '正在计算教务成绩中，请勿刷新浏览器！' })
      calcScore()
        .then(res => {
          if (res.code === 200) {
            this.$message({ type: 'success', message: '教务成绩计算成功！' })
          } else {
            this.$message({ type: 'error', message: '教务成绩计算失败，请联系管理员。' })
          }
        })
        .catch(() => {})
        .finally(() => {
          loadingInstance.close()
        })
    },
    formatData(data) {
      const _page = data && data.page || this.page
      const _data = {
        page: _page.toString(),
        size: '10'
      }
      if (this.activityYear) {
        _data.year = this.activityYear
      }

      if (this.activityTerm) {
        _data.term = this.activityTerm.toString()
      }

      if (this.activityDepa) {
        _data.depa = this.activityDepa.toString()
      }

      if (this.searchContext) {
        _data[this.searchAction] = this.searchContext
      }

      if (this.userScore) {
        _data.stu_cj = this.userScore
      }

      if (this.$store.getters.userInfo.role_id === 1) {
        this.depaSelectEnabled = false
        _data.user_id = this.$store.getters.userInfo.user_id
      }

      return _data
    },
    exportScoreExcel() {
      const params = []
      // 增加筛选参数
      if (this.activityDepa) {
        params.push(`depa=${this.activityDepa}`)
      }
      if (this.activityYear) {
        params.push(`year=${this.activityYear}`)
      }
      if (this.activityTerm) {
        params.push(`term=${this.activityTerm}`)
      }
      if (this.userScore) {
        params.push(`stu_cj=${this.userScore}`)
      }

      const search = params.join('&')
      // 创建隐藏的可下载链接
      var eleLink = document.createElement('a')
      eleLink.target = '_blank'
      eleLink.href = `/api/score/sel_jwcjExport.zepc?${search}`
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
    },
    exportChongXiu() {
      // const search = params.join('&')
      // 创建隐藏的可下载链接
      var eleLink = document.createElement('a')
      eleLink.target = '_blank'
      eleLink.href = '/api/score/exportMb.zepc'
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
    },
    handleEditAction(user) {
      this.currentEditUser = user
      this.editShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.descCount {
  font-size: 14px;
  color: #5e6d82;
  margin: 0;
  span {
    color: red;
  }
}
.name-search {
  width: 240px;
  margin-bottom: 10px;
  vertical-align: middle;
  .el-select {
  width: 80px;
}
}
@media screen and (max-width: 370px) {
  .pagination-container.hidden-sm-and-up {
    padding: 0;
  }
}
</style>
